<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="js/echarts.js"></script>
    <script src="js/jquery.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <style>
        .box{
            width: 600px;
            height:400px;
        }
        .box1{
            width: 600px;
            height:400px;
            position: absolute;
            top: 0;
            right: 10px;
        }
    </style>

</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div class="box" id="echart"></div>
<div class="box1" id="echart1"></div>
<script>
    echarts_1()
    echarts_2()
    function echarts_1() {
        var myChart = echarts.init(document.getElementById('echart'));
        var names=[]
        var nums1=[];
        var nums2=[];
    $.ajax({
        type : "get",
        async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "/Servlet?semester=1",
        dataType : "json",

        success : function(data) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            if (data.code=='success') {
                var obj = eval(data.items);     //解析后台传来的json数据
                for (var i = 0; i < obj.length; i++) {
                    var obj1 = new Object();
                    names.push(obj[i].name);
                    nums1.push(obj[i].num1);
                     alert(obj[i].name + "============"+ obj[i].num);
                    nums2.push(obj[i].num2);
                }

                myChart.hideLoading(); //隐藏加载动画
                myChart.setOption({ //加载数据图表
                    title: {
                        text: '第一学期各班男女人数展示'
                    },
                    calculable: true,
                    legend: {
                        //   指示框名字  注意！要和下方series中的name一起改
                        data: ['女', '男'],
                        // 指示框位置  距离上下左右多少
                        right: '5%',
                        top: '50%',
                        textStyle: {
                            color: '#4F4F4F'   //字体颜色
                        }
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: names,
                            axisLine: {   //x轴线的颜色以及宽度
                                show: true,   //是否显示X轴
                                lineStyle: {
                                    color: "#4F4F4F",
                                }
                            },
                            axisLabel: {
                                 interval: 0,  //间隔几条显示
                                 rotate: 20,  // 切斜度数
                                 fontSize: 10,   //字体大小
                            },
                            axisTick: {
                                //是否显示刻度线
                                show: false
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisTick: {
                                //y轴刻度线
                                show: false
                            },
                            axisLine: {
                                show: false, // Y轴
                                lineStyle: {
                                    color: "#4F4F4F",
                                }
                            },
                            splitLine: { // 表格里面Y轴线条
                                show: true,
                                lineStyle: {
                                    type: 'dashed',    //虚线
                                    color: '#04072F'    //虚线颜色
                                }
                            }
                        }
                    ],
                    // 整体大小
                    grid: {
                        left: '3%',
                        right: '4%',
                        top: '10%',
                        bottom: '5%',
                        containLabel: true
                    },
                    series: [
                        {
                            barWidth: 12,//柱子宽度
                            name: '女',
                            type: 'bar',
                            data: nums2,
                            itemStyle: {
                                //颜色样式部分
                                normal: {
                                    barBorderRadius: [20, 20, 0, 0],  //圆角[上左，上右，下右，下左]
                                    label: {
                                        show: true, //开启数字显示
                                        position: 'top', //在上方显示数字
                                        textStyle: { //数值样式
                                            color: '#474646',  //字体颜色
                                            fontSize: 10       //字体大小
                                        }
                                    },
                                    //   柱状图颜色渐变
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        { offset: 0, color: "#8277E9" },
                                        { offset: 1, color: "#CC77E9" },
                                    ]),
                                }
                            }

                        },
                        {
                            barWidth: 12,//柱子宽度
                            name: '男',
                            type: 'bar',
                            data: nums1,
                            itemStyle: {
                                //颜色样式部分
                                normal: {
                                    barBorderRadius: [20, 20, 0, 0],  //圆角[上左，上右，下右，下左]
                                    label: {
                                        show: true, //开启数字显示
                                        position: 'top', //在上方显示数字
                                        textStyle: { //数值样式
                                            color: '#474646',   //字体颜色
                                            fontSize: 10        //字体大小
                                        }
                                    },
                                    //   柱状图颜色渐变
                                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                        { offset: 0, color: "#017CE4" },
                                        { offset: 1, color: "#249EFD" },
                                    ]),
                                }
                            }
                        }
                    ]
                });
            }else{
                alert("后台数据获取失败!");
            }
        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
        // 使用刚指定的配置项和数据显示图表。
         myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        })
    }
    function echarts_2() {
        var myChart = echarts.init(document.getElementById('echart1'));
        var names=[]
        var nums1=[];
        var nums2=[];
        $.ajax({
            type : "get",
            async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/Servlet?semester=2",
            dataType : "json",

            success : function(data) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (data.code=='success') {
                    var obj = eval(data.items);     //解析后台传来的json数据
                    for (var i = 0; i < obj.length; i++) {
                        var obj1 = new Object();
                        names.push(obj[i].name);
                        nums1.push(obj[i].num1);
                        // alert(obj[i].name + "============"+ obj[i].num);
                        nums2.push(obj[i].num2);
                    }

                    myChart.hideLoading(); //隐藏加载动画
                    myChart.setOption({ //加载数据图表
                        title: {
                            text: '第二学期各班男女人数展示'
                        },
                        calculable: true,
                        legend: {
                            //   指示框名字  注意！要和下方series中的name一起改
                            data: ['女', '男'],
                            // 指示框位置  距离上下左右多少
                            right: '5%',
                            // top: '50%',
                            textStyle: {
                                color: '#4F4F4F'   //字体颜色
                            }
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: names,
                                axisLine: {   //x轴线的颜色以及宽度
                                    show: true,   //是否显示X轴
                                    lineStyle: {
                                        color: "#4F4F4F",
                                    }
                                },
                                axisLabel: {
                                    // interval: 0,  //间隔几条显示
                                    // rotate: 20,  // 切斜度数
                                    // fontSize: 10,   //字体大小
                                },
                                axisTick: {
                                    //是否显示刻度线
                                    show: false
                                },
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                axisTick: {
                                    //y轴刻度线
                                    show: false
                                },
                                axisLine: {
                                    show: false, // Y轴
                                    lineStyle: {
                                        color: "#4F4F4F",
                                    }
                                },
                                splitLine: { // 表格里面Y轴线条
                                    show: true,
                                    lineStyle: {
                                        type: 'dashed',    //虚线
                                        color: '#04072F'    //虚线颜色
                                    }
                                }
                            }
                        ],
                        // 整体大小
                        grid: {
                            left: '3%',
                            right: '4%',
                            top: '10%',
                            bottom: '5%',
                            containLabel: true
                        },
                        series: [
                            {
                                barWidth: 12,//柱子宽度
                                name: '女',
                                type: 'bar',
                                data: nums2,
                                itemStyle: {
                                    //颜色样式部分
                                    normal: {
                                        barBorderRadius: [20, 20, 0, 0],  //圆角[上左，上右，下右，下左]
                                        label: {
                                            show: true, //开启数字显示
                                            position: 'top', //在上方显示数字
                                            textStyle: { //数值样式
                                                color: '#474646',  //字体颜色
                                                fontSize: 10       //字体大小
                                            }
                                        },
                                        //   柱状图颜色渐变
                                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            { offset: 0, color: "#8277E9" },
                                            { offset: 1, color: "#CC77E9" },
                                        ]),
                                    }
                                }

                            },
                            {
                                barWidth: 12,//柱子宽度
                                name: '男',
                                type: 'bar',
                                data: nums1,
                                itemStyle: {
                                    //颜色样式部分
                                    normal: {
                                        barBorderRadius: [20, 20, 0, 0],  //圆角[上左，上右，下右，下左]
                                        label: {
                                            show: true, //开启数字显示
                                            position: 'top', //在上方显示数字
                                            textStyle: { //数值样式
                                                color: '#474646',   //字体颜色
                                                fontSize: 10        //字体大小
                                            }
                                        },
                                        //   柱状图颜色渐变
                                        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                            { offset: 0, color: "#017CE4" },
                                            { offset: 1, color: "#249EFD" },
                                        ]),
                                    }
                                }
                            }
                        ]
                    });
                }else{
                    alert("后台数据获取失败!");
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        })
    }

</script>

</body>
</html>